import { ref, onMounted, onBeforeUnmount } from "vue";

export default function useScroll() {
  const element = document.documentElement;

  // const clientHeight = element.clientHeight;

  const scrollTop = ref(0);

  const ableScrollHeight = ref(0);

  onMounted(() => {
    window.addEventListener("scroll", () => {
      scrollTop.value = element.scrollTop;
      // console.log(element.clientHeight);
      ableScrollHeight.value = element.scrollHeight - element.clientHeight;
      homeImgShowHandle(element.scrollTop);
      standHeightHandle();
      rightBtNavVisibleHandle();
      scheduleHandle();
    });
  });

  /**
   * 判断主页图片展示区域是否已经隐藏
   */
  const imgVisible = ref<boolean>(true);

  const homeImgShowHandle = (val: number) => {
    if (val >= 60) {
      imgVisible.value = false;
    } else {
      imgVisible.value = true;
    }
  };

  /**
   * 下拉组件绳子的高度
   */
  const standHeight = ref<string>("0vh");
  const standHeightHandle = () => {
    standHeight.value = (scrollTop.value * 100) / ableScrollHeight.value + "vh";
  };

  /**
   * 右下nav是否显示
   */
  const rightBtNavVisible = ref<boolean>(false);
  const rightBtNavVisibleHandle = () => {
    if (scrollTop.value >= 200) {
      rightBtNavVisible.value = true;
    } else {
      rightBtNavVisible.value = false;
    }
  };

  /**
   * 进度
   */
  const schedule = ref<number>(0);
  const scheduleHandle = () => {
    schedule.value = Math.ceil(
      (scrollTop.value * 100) / ableScrollHeight.value
    );
  };

  // onMounted(() => {
  //   rightBtNavVisibleHandle();
  // });

  onBeforeUnmount(() => {});

  return {
    imgVisible,
    scrollTop,
    ableScrollHeight,
    standHeight,
    rightBtNavVisible,
    schedule
  };
}
